<template>
  <div class="bullet-list">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-wrapper">
      <LoadingSkeleton type="list" :count="5" />
    </div>

    <!-- 空状态 -->
    <div v-else-if="!items.length" class="empty-wrapper">
      <n-empty description="暂无数据" size="small" />
    </div>

    <!-- 子弹列表 -->
    <div v-else class="bullet-items">
      <div
        v-for="(item, index) in paginatedItems"
        :key="item.object_id"
        class="bullet-item"
        @click="$emit('item-click', item.object_id)"
      >


        <!-- 弹药图片 -->
        <div class="bullet-image">
          <n-avatar
            :size="32"
            :src="item.image_url"
            :class="`grade-bg-${item.grade}`"
            style="background: #fff;"
          />
        </div>

        <!-- 弹药信息 -->
        <div class="bullet-info">
          <div class="bullet-name">{{ item.name }}</div>
          <div class="bullet-type">{{ item.bullet_type }}</div>
        </div>

        <!-- 价格信息 -->
        <div class="price-info">
          <div class="current-price">{{ Number(item.current_price || 0).toFixed(0) }}</div>
          <div class="price-label">当前价格</div>
        </div>

        <!-- 数量信息 -->
        <div class="quantity-info">
          <div class="quantity">{{ Number(item.quantity || 0) }}</div>
          <div class="quantity-label">数量</div>
        </div>

        <!-- 总价值 -->
        <div class="total-value">
          <div class="value">{{ Number(item.total_value || 0).toLocaleString() }}</div>
          <div class="value-label">总价值</div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="items.length > pageSize">
      <n-pagination
        :page="page"
        :page-size="pageSize"
        :item-count="items.length"
        show-size-picker
        :page-sizes="[5, 10, 15]"
        size="small"
        @update:page="$emit('page-change', $event)"
        @update:page-size="$emit('page-size-change', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NPagination, NEmpty, NAvatar } from 'naive-ui'
import type { BulletPackageRankingItem } from '@/types/ranking'
import LoadingSkeleton from '../../../components/common/LoadingSkeleton.vue'

// Props
interface Props {
  items: BulletPackageRankingItem[]
  loading: boolean
  total: number
  page: number
  pageSize: number
}

const props = withDefaults(defineProps<Props>(), {
  items: () => [],
  loading: false,
  total: 0,
  page: 1,
  pageSize: 5
})

// Emits
defineEmits<{
  'page-change': [page: number]
  'page-size-change': [pageSize: number]
  'item-click': [objectId: number]
}>()

// 计算分页后的数据
const paginatedItems = computed(() => {
  // 始终进行前端分页计算
  const start = (props.page - 1) * props.pageSize
  const end = start + props.pageSize
  return props.items.slice(start, end)
})
</script>

<style scoped>
.bullet-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.loading-wrapper,
.empty-wrapper {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bullet-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.bullet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--n-card-color);
  border: 1px solid var(--n-border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 50px;
}

.bullet-item:hover {
  border-color: var(--n-primary-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}



.bullet-image {
  flex-shrink: 0;
}

.bullet-info {
  flex: 1;
  min-width: 0;
  margin-right: 4px;
}

.bullet-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--n-text-color-1);
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.bullet-type {
  font-size: 10px;
  color: var(--n-text-color-3);
  line-height: 1.2;
}

.price-info,
.quantity-info,
.total-value {
  text-align: center;
  min-width: 60px;
  flex-shrink: 0;
}

.current-price,
.quantity,
.value {
  font-weight: 600;
  font-size: 11px;
  color: var(--n-text-color-1);
  margin-bottom: 1px;
  line-height: 1.2;
}

.value {
  color: var(--n-success-color);
  font-weight: bold;
}

.price-label,
.quantity-label,
.value-label {
  font-size: 9px;
  color: var(--n-text-color-3);
  line-height: 1.2;
}

.pagination-wrapper {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--n-border-color);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .bullet-item {
    gap: 6px;
    padding: 6px;
  }



  .bullet-name {
    font-size: 11px;
  }

  .bullet-type {
    font-size: 9px;
  }

  .price-info,
  .quantity-info,
  .total-value {
    min-width: 50px;
  }

  .current-price,
  .quantity,
  .value {
    font-size: 10px;
  }

  .price-label,
  .quantity-label,
  .value-label {
    font-size: 8px;
  }
}

@media (max-width: 768px) {
  .bullet-list {
    padding: 10px;
  }

  .bullet-item {
    gap: 8px;
    padding: 8px;
    min-height: 45px;
  }



  .bullet-name {
    font-size: 12px;
  }

  .bullet-type {
    font-size: 10px;
  }

  .price-info,
  .quantity-info,
  .total-value {
    min-width: 55px;
  }

  .current-price,
  .quantity,
  .value {
    font-size: 11px;
  }

  .price-label,
  .quantity-label,
  .value-label {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .bullet-item {
    flex-wrap: wrap;
    gap: 6px;
  }

  .bullet-info {
    flex: 1 1 100%;
    margin-right: 0;
  }

  .price-info,
  .quantity-info,
  .total-value {
    flex: 1;
    min-width: 0;
  }
}
</style>
